import React, { useState, useEffect } from 'react'
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
const { confirm } = Modal
import { SearchOutlined, DeleteOutlined, ExclamationCircleFilled, EditOutlined } from '@ant-design/icons'
import axios from 'axios'
export default function RightList() {
  const [dataSource, setdataSource] = useState<any[]>([])
  useEffect(() => {
    axios.get('/rights?_embed=children').then((res: any) => {
      const list = res.data
      list.forEach((item: any) => {
        if (item.children.length === 0) {
          item.children = ''
        }
      })
      setdataSource(list)
    })
  }, [])
  const showConfirm = (item: any) => {
    confirm({
      title: 'Do you want to delete these items?',
      icon: <ExclamationCircleFilled />,
      content: 'Some descriptions',
      onOk() {
        delMethods(item)
      },
      onCancel() {
        console.log('Cancel')
      }
    })
  }
  const switchMethods = (item: any) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    console.log(item)
    setdataSource([...dataSource])
    if (item.grade === 1) {
      axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    } else {
      axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    }
  }
  //删除
  const delMethods = (item: any) => {
    if (item.grade == 1) {
      setdataSource(dataSource.filter((item2) => item2.id !== item.id))
      axios.delete(`/rights/${item.id}`)
    } else {
      let newDataSource = dataSource.filter((item2) => item2.id !== item.rightId)
      newDataSource[0].children = newDataSource[0].children.filter((item2: any) => item2.id !== item.id)
      setdataSource([...newDataSource])
      axios.delete(`/children/${item.id}`)
    }
  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (id: string) => {
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'age'
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      key: 'address',
      render: (key: string) => {
        return <Tag color="orange">{key}</Tag>
      }
    },
    {
      title: '操作',
      render: (item: any) => {
        return (
          <div>
            <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => showConfirm(item)}></Button>

            <Popover
              content={
                <div style={{ textAlign: 'center' }}>
                  <Switch
                    defaultChecked
                    onChange={onChange}
                    checked={item.pagepermisson}
                    onClick={() => {
                      switchMethods(item)
                    }}
                  />
                </div>
              }
              title="配置项"
              trigger={item.pagepermisson === undefined ? '' : 'click'}
            >
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                disabled={item.pagepermisson === undefined}
              ></Button>
            </Popover>
          </div>
        )
      }
    }
  ]
  const onChange = (checked: boolean) => {
    console.log(`switch to ${checked}`)
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} />;
    </div>
  )
}
